<template>
  <van-skeleton title avatar :row="3" :loading="props.loading" v-for="user in props.userList">
    <van-card :desc="user.userInfo" :title="`${user.nickname}`" :thumb="user.avatarUrl">
      <template #tags>
        <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right: 8px; margin-top: 8px">
          {{ tag }}
        </van-tag>
      </template>
      <template #footer>
        <van-button size="small" type="primary" plain @click="doShowPhone(user)">联系我</van-button>
      </template>
    </van-card>
  </van-skeleton>
</template>

<script setup lang="ts">
import {UserType} from "../models/user";
import {Dialog} from "vant";

interface UserCardListProps {
  loading: boolean;
  userList: UserType[];
}

const props = withDefaults(defineProps<UserCardListProps>(), {
  loading: true,
  // @ts-ignore
  userList: [] as UserType[],
});

const doShowPhone = (user: UserType) => {
  Dialog.alert({
    title: '联系方式',
    message: user.phone,
  }).then(() => {
    // on close
  });
}

</script>

<style scoped>
#userCardList :deep(.van-image__img) {
  height: 128px;
  object-fit: unset;
}
</style>
